<template>
  <div class="flex-1 page pt-12">
    <div class="px-40 page_top">
      <el-row class="first pb-12">
        <el-col :xs="24" :sm="24" :md="24" :lg="11" :xl="11">
          <div class="flex flex-col h-full justify-center">
            <p class="text-5xl font-black title">SimpleMath</p>
            <p class="title_2 text-xl mb-5 mt-9">{{ $t('first.description') }}</p>
            <p class="title_3 text-base">{{$t('first.secondContext')}}</p>
          </div>
        </el-col>
      </el-row>

      <div class="second flex flex-col items-center pt-12 pb-12">
        <p class="title text-4xl text-center">{{ $t('first.subtitle') }}</p>
        <p class="title_2 text-lg text-center pt-4 pb-4 color_1">
          {{ $t('first.description') }}
        </p>
        <el-row class="w-full max-w-screen-md mx-auto" :gutter="24">
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="px-4">
            <div class="flex flex-col items-center justify-center h-full min-h-[300px]">
              <p class="title_3 text-lg py-4 text-center">{{ $t('first.handwritingRecognition') }}</p>
              <div class="h-full w-full flex flex-col items-center">
                <img class="border_container rounded-2xl w-[800px] h-[200px] object-contain block hover_shadow mb-10 mx-auto" src="/sx.png" alt="手写公式示例">
                <img class="border_container rounded-2xl w-[800px] h-[200px] object-contain block hover_shadow mx-auto" src="/sx-result.png" alt="手写公式结果">
              </div>
            </div>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="px-4">
            <div class="flex flex-col items-center justify-center h-full min-h-[300px]">
              <p class="title_3 text-lg py-4 text-center">{{ $t('first.imageRecognition') }}</p>
              <div class="h-full w-full flex flex-col items-center">
                <img class="border_container rounded-2xl w-[800px] h-[200px] object-contain block hover_shadow mb-10 mx-auto" src="/tp.png" alt="公式图片示例">
                <img class="border_container rounded-2xl w-[800px] h-[200px] object-contain block hover_shadow mx-auto" src="/tp-ocr.png" alt="公式图片结果">
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="three flex flex-col items-center py-12 min-h-96 justify-center">
        <div class="text-4xl py-2 mb-7 font-medium">{{ $t('first.formatSupport') }}</div>
        <p class="w-2/4 text-lg title_2 mb-8 color_1">
          {{ $t('first.formatDescription') }}
        </p>
        <div class="flex">
          <img src="/latex_logo.png" alt="" class="h-12 w-auto block mx-5"/>
          <img src="/word_logo.jpg" alt="" class="h-12 w-auto block mx-5"/>
          <img src="/image_logo.png" alt="" class="h-12 w-auto block mx-5"/>
        </div>
      </div>
      <div class="four mt-40 flex flex-col items-center py-12 justify-center mb-52">
        <p class="title text-4xl font-bold ">{{ $t('first.editorTitle') }}</p>
        <p class="title_2 py-2 px-8 mt-20 text-lg mb-2.5 color_1">{{ $t('first.editorSubtitle') }}</p>
        <p class="">
          <router-link to="/">
            <el-button class="mt-20" type="primary" round size="large">{{ $t('first.experienceButton') }}</el-button>
          </router-link>
        </p>
      </div>
    </div>
    <div class="five flex flex-col items-center justify-center">
      <div class="five_box flex flex-col items-center justify-center py-52">
        <p class="title text-4xl text-white">{{ $t('first.goalTitle') }}</p>
        <p class="title_2 text-lg text-white w-6/12 my-7 leading-10">
          {{ $t('first.goalDescription') }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'About'
});
</script>

<style scoped lang="scss">
.page {
  background: linear-gradient(1deg, #fff, #fff 93%, #69c);

  .hover_shadow {
    &:hover {
      box-shadow: 0 2px 4px rgb(0 0 0 / 12%), 0 0 6px rgb(0 0 0 / 4%);
    }
  }

  .border_container {
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  }

  .color_1 {
    color: #696969;
  }
}

.border_container {
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.first {
  .title {
    font-weight: bold;
    color: rgb(105 105 105);
    text-shadow: white 3px 1px 1px;
  }

  .title_2 {
    color: rgba(128, 128, 128, 1);
    font-weight: bold;
  }

  .title_3 {
    color: rgb(170, 170, 170);
  }
}

.second {
  background: rgb(250, 250, 250);
}

.four {
  background: rgb(250, 250, 250);

  video {
    object-fit: cover;
    width: 75vw;
    height: 30vw;
    margin-left: auto;
    margin-right: auto;
  }
}

.five {
  background: url('https://www.SimpleMath.cn/img/background.76661ba9.png') no-repeat fixed 0 0/cover;
  overflow: hidden;
  width: 100%;

  &_box {
    background: rgba(80, 185, 206, 0.6);
    width: 100%;
  }
}
</style>
